<template>
	<view class="content">
		<view id="column_view" v-for="(item,index) in contentlist" :key="index" class="list">
			<!-- 单列 -->
			<view v-for="(citem,cindex) in item.list" :key="cindex" class="card " @click="detail(citem)">
				<view class="list_item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pbl1.png" class="list_item_img" mode="widthFix"></image>
					<view class="list_item_bottom">
						<view class="list_item_sesc">{{citem.title}}</view>
						<view class="list_item_price">
							{{citem.jifen}}
							<text class="fs-28">积分</text>
							<text style="margin: 0 10rpx;">+</text>
							{{ citem.jiage | pointsPrice }}
							<text class="fs-28">.{{ citem.jiage | pointsPrice(1) }}</text>
							<text class="fs-28">元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 瀑布流插件
	 * @description 瀑布流插件
	 * @property {Array} flowlist 必填 需要处理的数组
	 * @property {Boolean} load 默认1 是否加载
	 * @property {Boolean} show_bottom 是否展示底部卡片
	 * @property {Boolean} show_address 是否展示地址信息
	 */
	import { pointsPrice } from '@/utils/util1.js';
	export default {
		props: {
			show_type: {
				type: [String, Number],
				default: 1,
			},
			flowlist: {
				type: Array
			},
			load: {
				type: Boolean,
				default: true,
			},
			show_bottom: {
				type: Boolean,
				default: true,
			},
			show_address: {
				type: Boolean,
				default: false,
			},
			zhuduan:{
				type: Boolean,
				default: false,
			},
		},
		filters: {
			pointsPrice
		},
		data() {
			return {
				//渲染内容列表 (左右两列)
				contentlist: [{
						list: [],
					},
					{
						list: [],
					}
				],
				// 历史下标
				last_index: '',
			}
		},
		onReady() {
			console.log(this.flowlist)
		},
		
		methods: {
			// 跳转详情
			detail(item) {
				console.log(item)
				this.$emit('detail', item)
			},

			//渲染列表
			showcontent() {
				/**
				 * contentlist		需要渲染的列表
				 * flowlist			传进来的列表
				 */
				// 计算总数
				const index = this.contentlist.reduce((total, current) => {
					return total + current.list.length
				}, 0)
				// 当前下标和历史下标重复打断 
				console.log(this.contentlist)
				if(!this.zhuduan){
					if (index === this.last_index) return
				}
				// 如果最后一个
				if (index > this.flowlist.length - 1) {
					// 判断是否需要加载动画
					if (this.load) {
						// 关闭加载动画
						uni.hideLoading()
					}
					this.$emit('flowend')
					return
				}

				// 获取元素
				const query = uni.createSelectorQuery().in(this);
				let flag = 0;

				query.selectAll('#column_view').boundingClientRect(data => {
					// 判断哪边小
					flag = data[0].bottom - data[1].bottom < 0 ? 0 : 1;
					// 添加列表
					// console.log(this.flowlist)
					this.contentlist[flag].list.push(this.flowlist[index])
				}).exec()

				// 历史下标
				this.last_index = index
			},

			//初始化
			init() {
				// 判断是否需要加载动画
				if (this.load) {
					// 开启加载动画
					uni.showLoading()
				}

				this.contentlist = [{
					list: []
				}, {
					list: []
				}]

				setTimeout(() => {
					this.showcontent();
				}, 0)
			}
		},

		mounted() {
			if (this.flowlist.length) {
				setTimeout(() => {
					this.init()
				}, 200)
			}
		}
	}
</script>
<style lang="scss">
	

	// 内容
	.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20rpx;
		position: relative;
		width: 100%;
		height: 100%;
		}

		// 列表
		.list {
			display: flex;
			flex-direction: column;
			width: 330rpx;
		}
.list_item {
	width: 330rpx;
	background: #fff;
	border-radius: 12rpx;
	margin-top: 30rpx;
}
.list_item_img {
	width: 100%;
	border-radius: 12rpx 12rpx 0 0;
}
.list_item_sesc {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.list_item_bottom {
	padding: 20rpx 16rpx;
	box-sizing: border-box;
}
.list_item_price{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 40rpx;
	font-weight: 600;
}
.fs-28{
	font-size: 28rpx;
}

		
	
</style>